<template>
  <section id="login">
    <div>
      <img src="../../../../static/images/defalut_focus_screen_bg.jpg" alt srcset>
      <div class="loginlogomain">
        <div class="loginlogo">
          <img src="../../../../static/images/login_icon_logo@2x.png" alt srcset>
        </div>
        <div class="inputStyle">
          <el-input
            placeholder="账号/手机号码"
            prefix-icon="iconfont icon-test237"
            v-model="inputText"
            clearable
          ></el-input>
          <el-input
            placeholder="请输入密码"
            prefix-icon="iconfont icon-suo"
            v-model="inputPassword"
            show-password
            clearable
            class="inputPasswordS"
          ></el-input>
        </div>
        <div class="registerT">
          <el-checkbox v-model="checked" @change="checkedChange">记住密码</el-checkbox>
          <router-link to="/forget">忘记密码&nbsp;></router-link>
        </div>
        <div class="submitS">
          <el-button :plain="true" @click="submitX">登陆</el-button>
        </div>
        <div class="registerTs">
          <router-link to="/register">账号注册&nbsp;></router-link>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      inputText: '',
      inputPassword: '',
      checked: false
    }
  },
  methods: {
    checkedChange () {
      // console.log(this.checked, 'checked')
      if (this.checked === true) {
        this.$setCookie('loginStaticChecked', true, 30)
      } else {
        this.$deleteCookie('loginStaticChecked')
      }
    },
    submitX () {
      if (this.inputText === '123456' && this.inputPassword === '123456') {
        this.$setCookie('userName', this.inputText, 30)
        this.$setCookie('userPwd', this.inputPassword, 30)
        if (this.inputText === '123456' && this.inputPassword === '123456') {
          this.$message({
            showClose: true,
            message: '登陆成功正在为您跳转。。。',
            type: 'success',
            center: true
          })
          setTimeout(() => {
            this.$router.push({ path: '/index', query: {} })
          }, 2500)
        }
      } else {
        this.$message({
          showClose: true,
          message: '账号或密码输入有误，请重新输入！',
          type: 'error',
          center: true
        })
      }
    }
  },
  mounted () {
    var setChecket = this.$getContent('loginStaticChecked')
    var userName = this.$getContent('userName')
    var userPwd = this.$getContent('userPwd')
    // this.checked = true
    setChecket === '' ? this.checked = false : this.checked = true
    userName === '' ? this.inputText = '' : this.inputText = userName
    if (this.checked) {
      userPwd === '' ? this.inputPassword = '' : this.inputPassword = userPwd
    } else {
      this.inputPassword = ''
    }
  }
}
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#login > div {
  width: 1060px;
  height: 600px;
  background-color: #ffffff;
  box-shadow: 0 6px 20px 0 rgba(63, 96, 129, 0.27);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#login > div > img {
  width: 600px;
  height: 600px;
}
.loginlogomain {
  width: 460px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.loginlogo {
  width: 360px;
  height: 164px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.loginlogo > img {
  width: 142px;
  height: 60px;
}
.inputStyle {
  width: 360px;
}
.inputPasswordS {
  margin-top: 15px;
}
.registerT {
  width: 360px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.registerT > :nth-child(n + 1) {
  color: #606266;
  font-size: 14px;
}
.submitS {
  margin: 15px 0;
}
.registerTs {
  width: 360px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.registerTs > :nth-child(1) {
  color: #606266;
  font-size: 14px;
}
/deep/ .el-button,
/deep/ .el-button:hover {
  width: 100% !important;
  background-color: rgba(32, 173, 229, 0.5) !important;
  width: 360px !important;
  height: 40px !important;
  border: none !important;
  cursor: pointer;
  border-radius: 4px !important;
  font-size: 15px !important;
  color: #fff !important;
}
</style>
